<template>
	<div class="contain">
		<div class="contain-header">
			<el-form  label-width="50px" inline >
				<el-form-item label="学校:">
					<el-input  placeholder="请输入学校名称" v-model="pageForm.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="getList">搜 索</el-button>
					<el-button  size="small" @click="resetList">重 置</el-button>
					<el-button type="primary" size="small" @click="addDialog = true">新增学校</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="contain-table">
			<div class="tab-line">
				<div class="tab-show">学校名称</div>
				<div class="tab-set">操作</div>
			</div>
			<div class="tab-body" v-for="item in list" :key="item.id">
				<div class="tab-show">{{item.schoolName}}</div>
				<div class="tab-set">
					<el-button type="danger" text size="default" @click="openEdit(item)">编辑</el-button>
					<el-button type="primary" text size="default" @click="del(item.id)">删除</el-button>
				</div>
			</div>
		</div>
		<div class="contain-footer">
			<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					class="mt-4"
					:page-size="5"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
			/>
		</div>
	</div>
	<el-dialog
			v-model="addDialog"
			title="新建学校"
			width="30%"
	>
		<el-form>
			<el-form-item label="学校名称:">
				<el-input v-model="addForm.name" placeholder="请输入学校名称" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="addDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitAdd">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
	<el-dialog
			v-model="editDialog"
			title="编辑学校"
			width="30%"
	>
		<el-form>
			<el-form-item label="学校名称:">
				<el-input v-model="editForm.name"
						  placeholder="请输入学校名称" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button @click="editDialog = false">取 消</el-button>
			<el-button type="primary" @click="submitEdit">确 定</el-button>
		  </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
    import {ref,reactive,onBeforeMount,onMounted} from 'vue'
	import { schList, delSch, addSch,editSch } from "../api/schoolMoudles"
    import {ElMessageBox, ElNotification} from 'element-plus'
    const pageForm = reactive({
        name: '',
        pageIndex: 1,
        pageSize: 5,
	})
	let list = ref([])
	let total = ref(0)
	const getList = async () => {
        const { data }  = await schList(pageForm)
		if (data.statusCode === 200){
		    list.value = data.data.data
			total.value = data.data.total
		}
	}
    //分页
    const handleSizeChange = (val: number) => {
        pageForm.pageSize = val
        getList()
    }
    const handleCurrentChange = (val: number) => {
        pageForm.pageIndex = val
        getList()
    }
	//重置
	const resetList = () => {
        pageForm.name = ''
        getList()
	}
    onMounted(() => {
        getList()
	})
	//删除
    const del = (id) => {
        ElMessageBox.confirm(
            '确定删除此学校?',
            '提 示',
            {confirmButtonText: '确 定',cancelButtonText: '取 消',  type: 'warning',}
        )
            .then(() => {
				delSch(id).then(res => {
                   if (res.data.statusCode === 200){
                       ElNotification({
                           title: '提 示',
                           message: res.data.message,
                           type: 'success',
                       })
					   getList()
				   }
				})
            })
            .catch(() => {
            })
    }
    //新增
	let addDialog = ref<boolean>(false)
	let addForm = reactive({
		name:''
	})
	const submitAdd = async  () => {
        if (addForm.name){
			const { data } = await addSch(addForm)
			if (data.statusCode === 200){
                ElNotification({
                    title: '提 示',
                    message: data.message,
                    type: 'success',
                })
				addDialog.value = false
				addForm.name = ''
				await getList()
			}
		}else {
            ElNotification({
                title: '提 示',
                message: '请填写学校名称',
                type: 'error',
            })
		}
	}
    //编辑
    let editDialog = ref<boolean>(false)
	let editForm = ref({})
	const openEdit = (item) => {
        editForm.value.name = item.schoolName
        editForm.value.id = item.id
		editDialog.value = true
	}
	const submitEdit = async () => {
        if (editForm.value.name){
            const { data } = await editSch(editForm.value)
            if (data.statusCode === 200){
                ElNotification({
                    title: '提 示',
                    message: data.message,
                    type: 'success',
                })
                editDialog.value = false
                editForm.value = {}
                await getList()
            }else {
                ElNotification({
                    title: '提 示',
                    message: '请填写学校名称',
                    type: 'error',
                })
            }
		}
	}
</script>

<style scoped lang="less">
	.contain{
		position: relative;
		width: 100%;
		height: 100%;
		.contain-header{
			margin-bottom: 20px;
			display: flex;
			justify-content: flex-end;
		}
		.contain-table{
			margin: 0 auto 20px;
			width: 90%;
			.tab-line{
				width: 100%;
				display: flex;
				margin-bottom: 20px;
				align-items: center;
				padding: 0 20px;
				box-sizing: border-box;
				justify-content: space-between;
				.tab-show{
					width: 50%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
				.tab-set{
					width: 50%;
					text-align: center;
					font-size: 18px;
					color: #666;
				}
			}
			.tab-body{
				width: 100%;
				display: flex;
				margin-bottom: 10px;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 20px;
				border-radius: 20px;
				box-sizing: border-box;
				.tab-show{
					width: 50%;
					text-align: center;
					font-size: 16px;
					color: #333;
				}
				.tab-set{
					width: 50%;
					text-align: center;
				}
			}
		}
		.contain-footer{
			position: absolute;
			bottom: 5%;
			left: -50%;
			transform: translateX(50%);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
